import QtQuick 2.9
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.3
import "qrc:/Common.js" as Common

Rectangle{
    id:container
    anchors.top: parent.top
    anchors.topMargin: 0
    property var chatData : null
    property var bubbleIndex: 0
    signal exitRequest()
    color: "#EDEDED"

    ColumnLayout{
        width: parent.width
        height: parent.height - bottom.height
        spacing: 20

        // 顶部工具栏
        ChatTopBar{
            id:chatBar
            Layout.fillWidth: true
            //Layout.alignment: Qt.AlignHCenter
            z:2
            onExit: exitRequest()
            name:chatData == null ? "" : chatData.name

            // 传上来的点击事件
            onClicked: {
                popup.x = x - popup.width + witd
                popup.y = y  + heigh
                popup.open();

            }
        }

        ListView {
            id: chatView
            Layout.fillHeight: true
            Layout.fillWidth: true
            delegate: ChatDelegate {
                id: charDelegate
                headSrc: chatData.headSrc
                bubbleIndex: container.bubbleIndex
            }
            model: chatData == null ? "" : chatData.recode
//            populate: Transition {
//                ScriptAction { script: { moveEndPosTime.start();} }
//            }

        }
    }

    // 底部消息框
    ChatBottomBar{
        id:bottom
        anchors.bottom: parent.bottom
        width: parent.width
        Layout.fillWidth: true
        onSend: sendMsg(text)
        z:2
    }

    // 发送了一条消息
    function sendMsg(text) {
        if (text.length <= 0 ) return;

        // 校验上条消息,是否需要添加时间戳
        checkPreMsgJoinTime();
        chatData.recode.append(
                {
                      date: new Date(),
                      msgType: 'send',
                      msg: text,
                });
        chatView.positionViewAtIndex(chatView.count - 1,ListView.Beginning);
        moveEndPosTime.start();

        // 模拟接收
        recvTime.interval = Math.random() * 500 + 500;      // 0.5-1秒之间回复
        recvTime.restart();
    }

    // 接收一条消息
    function recvMsg(text) {
        if (text.length <= 0 ) return;

        checkPreMsgJoinTime();
        chatData.recode.append(
                {
                      date: new Date(),
                      msgType: 'recv',
                      msg: text,
                });
        chatView.positionViewAtIndex(chatView.count - 1,ListView.Beginning);
        moveEndPosTime.start();
    }

    // 添加时间戳
    function appendDateTime() {

        chatData.recode.append(
                {
                      date: new Date(),
                      msgType: 'hintDate',
                      msg: ' '
                });
    }


    // 校验上条消息,是否需要添加时间戳
    function checkPreMsgJoinTime() {
        var mymodel = chatData.recode;

        if (!mymodel.count) {
            appendDateTime();
            return;
        }

        if (mymodel.get(mymodel.count - 1).msgType === "hint") {
            appendDateTime();
            return;
        } else {
            var total = new Date() - mymodel.get(mymodel.count - 1).date;
            if (total > (1000*60*1)) {      // 上个消息是1分钟之前发的,则添加时间戳
                appendDateTime();
                return;
            }
        }
    }

    // 让聊天信息，停留在鼠标的位置
    Timer {
        id: moveEndPosTime
        interval: 300
        onTriggered: {
            chatView.positionViewAtIndex(chatView.count - 1,ListView.Beginning) ;
        }
    }

    // 模拟接收
    Timer {
        id: recvTime
        interval: 100
        onTriggered: {
            if (chatData.recode.count) {
               var str =  Common.msgRecvStr(chatData.recode.get(chatData.recode.count - 1).msg)
               recvMsg(str)
            }
        }
    }

    // 加入气泡更改滑窗
    Popup {
          id: popup

          width: 80
          height: 120
          modal: true
          focus: true
          closePolicy: Popup.CloseOnEscape | Popup.CloseOnPressOutside
          padding: 0

          // 滑窗
          SwipeView {
               id: view
               anchors.fill:  parent
               clip: true
               currentIndex: container.bubbleIndex
               Rectangle {
                   color: "#A0EA6F"
                   Text {
                       anchors.centerIn: parent
                       text: "默认气泡"
                       font.pixelSize: 12
                       font.family: "Microsoft Yahei"
                       color: "#FFFFFF"
                   }
               }
               Rectangle {
                   color: "#12B7F5"
                   Text {
                       anchors.centerIn: parent
                       text: "蓝色气泡"
                       font.pixelSize: 12
                       font.family: "Microsoft Yahei"
                       color: "#FFFFFF"
                   }
               }
               Rectangle {
                   color: "#535353"
                   Text {
                       anchors.centerIn: parent
                       text: "炫黑气泡"
                       font.pixelSize: 12
                       font.family: "Microsoft Yahei"
                       color: "#FFFFFF"
                   }
               }
               onCurrentIndexChanged: {

                   container.bubbleIndex = currentIndex
               }
          }
          PageIndicator {
            count: view.count
            currentIndex: view.currentIndex
            anchors.horizontalCenter: parent.horizontalCenter
            anchors.bottom: parent.bottom
         }
    }

}



